@use 'sass:map';
@use '@angular/material' as mat;
@use '@gravitee/ui-particles-angular' as gio;

:host {
  max-width: 100px;
  display: block;
}

.circular {
  &__circle-bg {
    fill: none;
    stroke: mat.get-color-from-palette(gio.$mat-dove-palette, 'darker10');
    stroke-width: 2.8;
  }

  &__circle {
    fill: none;
    stroke-width: 2.8;
    stroke-linecap: round;
    animation: progress 1s ease-out forwards;
  }

  &__percentage {
    fill: mat.get-color-from-palette(gio.$mat-space-palette, 'lighter40');
    font-family: sans-serif;
    font-size: 0.7em;
    text-anchor: middle;
  }

  &.bad-color {
    .circular__circle {
      stroke: mat.get-color-from-palette(gio.$mat-error-palette, 'default');
    }
    .circular__percentage {
      fill: mat.get-color-from-palette(gio.$mat-error-palette, 'darker40');
    }
  }

  &.medium-color {
    .circular__circle {
      stroke: mat.get-color-from-palette(gio.$mat-warning-palette, 'default');
    }
    .circular__percentage {
      fill: mat.get-color-from-palette(gio.$mat-warning-palette, 'darker20');
    }
  }

  &.good-color {
    .circular__circle {
      stroke: mat.get-color-from-palette(gio.$mat-success-palette, 'default');
    }
    .circular__percentage {
      fill: mat.get-color-from-palette(gio.$mat-success-palette, 'darker60');
    }
  }
}
